<template>
  <el-header class="header-container">
    <!-- 使用el-row作为容器，el-col分配列宽 -->
    <el-row class="header-content" justify="space-between">
      <!-- 左侧logo区域，占8份宽度（总24份） -->
      <el-col :span="8">
        <div class="logo-container" @click="handleCardClick('screenMain')">
          <img class="logo" src="@/assets/image/ytj/logo.png" alt="" srcset="">
        </div>
      </el-col>

      <!-- 右侧时间信息区域，占16份宽度 -->
      <el-col :span="16" class="time-col">
        <!-- 内容容器 -->
        <div class="text-center">
          <el-row class="header-content2 right-aligned-row">
            <el-col :span="6" style="margin-right: 30px;">
              <!-- 时间显示（核心突出） -->
              <div class="text-time">
                {{ hours }}:{{ minutes }}
              </div>
            </el-col>
            <el-col :span="6">
              <!-- 日期信息栏（次要信息，与时间保持合适间距） -->
              <el-row>
                <el-col :span="12">
                  <span>{{ year }}.{{ month }}.{{ day }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="width: 80px;">
                  {{ combined.weekday+' '+combined.period }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: 'AppHeader',
  data() {
    return {
      hours: '',
      minutes: '',
      year: '',
      month: '',
      day: '',
      weekday: '',
      period: '',
      weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      combined: {}
    }
  },
  mounted() {
    this.updateTime()
    setInterval(this.updateTime, 1000)
  },
  methods: {
    handleCardClick(functionName) {
      this.$router.push({ name: functionName })
    },
    updateTime() {
      const now = new Date()

      // 处理小时（保持24小时制，与图片一致）
      this.hours = now.getHours().toString().padStart(2, '0')
      // 处理分钟
      this.minutes = now.getMinutes().toString().padStart(2, '0')

      // 处理日期
      this.year = now.getFullYear()
      this.month = (now.getMonth() + 1).toString().padStart(2, '0')
      this.day = now.getDate().toString().padStart(2, '0')

      // 处理星期和时段
      this.weekday = this.weekdays[now.getDay()]
      this.period = now.getHours() >= 12 ? '下午' : '上午'
      this.combined = {
        weekday: this.weekdays[now.getDay()],
        period: now.getHours() >= 12 ? '下午' : '上午'
      }
    }
  }
}
</script>

<style scoped>
.header-container {
  padding: 0;
  padding-top: 35px;
}

/* 调整行容器样式 */
.header-content {
  height: 100%;
  padding: 0 20px;
  .text-time{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
  }
}
.header-content2 {
  height: 100%;
  padding: 0 20px;
  float: right;
  .text-time{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
  }
}
.right-aligned-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 250px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.system-name {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

/* 时间列样式调整，确保内容右对齐 */
/* 时间数字的特殊处理，确保冒号与数字对齐 */
div:first-child {
  letter-spacing: -0.02em; /* 微调字间距，更贴近图片紧凑感 */
}

div:first-child span:not(:last-child) {
  margin-right: 0.1em;
}
.time-col {
  display: flex;
  justify-content: flex-end;
}
</style>
